<template>
  <el-dropdown :hide-on-click="false" class="user-dropdown">
    <el-link
      href="#"
      :underline="false"
      style="margin: 0 5px; height: 57px; line-height: 57px"
    >
      <el-avatar :src="circleUrl" id="avatar"></el-avatar>
      <span style="margin-left: 10px; font-size: larger">{{ userName }}</span>
    </el-link>
    <template #dropdown>
      <el-dropdown-menu>
        <!-- 下拉列表 -->
        <div class="person-box">
          <div class="name-vip">
            <span>{{ userName }}</span>
            <el-button type="warning" round size="small">开通会员</el-button>
          </div>
          <div class="vip">
            <span>你还不是会员</span>
          </div>
          <el-divider class="line">
            <!-- <el-icon style="color:rgb(255, 226, 6);"><star-filled /></el-icon> -->
            <span>解锁会员52项特权</span>
          </el-divider>
          <div class="vip-gn">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <!-- <div class="other">
                    </div>
                    <div class="other">
                    </div>
                    <div class="other">
                    </div> -->
          <div class="block text-center">
            <!-- <span class="demonstration">Switch when indicator is hovered (default)</span> -->
            <el-carousel height="200px" direction="vertical">
              <el-carousel-item v-for="item in srcList" :key="item">
                <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
                <el-image :src="item"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="box-help">
            <div @click="SettingPerson">个人页面</div>
            <div>帮助中心</div>
            <div>联系中心</div>
          </div>
        </div>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { reactive, toRefs, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const SettingPerson = () => {
  router.push({
    path: '/SettingPerson'
  })
}
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]

//用户名
const userName = ref(localStorage.getItem('userNick'))
const qqAvatar = ref(localStorage.getItem('qqAvatar'))
//用户头像
const state = reactive({
  // circleUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d2a8885-131d-4530-835a-0ee12ae4201b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688529503&t=a1bcc47cfea15612d8c270d52e52fedd'
  circleUrl: qqAvatar.value
})

const { circleUrl } = toRefs(state)
</script>
<style scoped>
/* 内部大小样式 */
.person-box {
  width: 300px;
  height: 400px;
  font-size: larger;
}

/* 开通会员 */
.person-box .name-vip span:hover {
  color: rgb(3, 197, 197);
  cursor: pointer;
}

.person-box .name-vip {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 30px;
}

.person-box .vip {
  width: 240px;
  text-align: center;
  padding: 0 10px;
  margin: 5px 20px;
  border-radius: 10px;
  height: 30px;
  line-height: 30px;
  background-color: rgb(243, 237, 229);
  color: rgb(188, 160, 0);
  cursor: pointer;
}

.person-box .line {
  background-color: rgb(255, 226, 6);
}

.person-box .line span {
  font-size: smaller;
  color: rgb(147, 125, 2);
}

/* 圆圈样式 */
.vip-gn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.vip-gn div {
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: rgb(242, 202, 101);
}

/* 长方体 */
.person-box .other {
  cursor: pointer;
  width: 260px;
  text-align: center;
  padding: 0 10px;
  margin: 5px 10px;
  border-radius: 10px;
  height: 60px;
  line-height: 30px;
  /* background-color: rgb(238, 238, 238); */
}

/* 底部个人、帮助 */
.box-help {
  cursor: pointer;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.box-help div:hover {
  background-color: rgb(249, 244, 244);
  font-weight: bolder;
}
</style>
